<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">新增</el-button>
    <el-table :data="tableData">
      <el-table-column prop="rid" label="角色ID" width="140">
      </el-table-column>
      <el-table-column prop="rname" label="角色名" width="120">
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？"  @confirm="handleDelete(scope.$index, scope.row)"  >
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>


      </el-table-column>
    </el-table>
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="form.rname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "Role",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form:{
        rid:'',
        rname:'',

      },
      visible: false,
    }
  },
  created() {
    this.updateUsers();
  },
  methods:{
    handleDelete(index, row){
      let config = {
        headers: {
          "Content-Type":"text/plain"
        }
      };
      this.$axios.post("/roles/delete",row.rid+"",config).then(response=>{
        let d=response.data;
        console.log(d)
        if(d.status==0){
          this.open1(d.msg);
          this.updateUsers();
        }
      })
    },
    handleEdit(index,row){
      this.form.rname=row.rname;
      this.form.rid=row.rid;
      this.form.password=row.password;
      this.dialogFormVisible=true;
    },
    insert(){
      if (this.form.rid==''){
        this.$axios.post("/roles/save",this.form).then(response=>{
          let d=response.data;
          console.log(d)
          if(d.status==0){
            this.open1(d.msg);
            this.updateUsers();
            this.dialogFormVisible=false;
          }
        })
      }else {
        this.$axios.post("/roles/update",this.form).then(response=>{
          let d=response.data;
          console.log(d)
          if(d.status==0){
            this.open1(d.msg);
            this.updateUsers();
            this.dialogFormVisible=false;
          }
        })
      }
      this.form.rid=this.form.rname='';
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    updateUsers(){
      this.$axios.post("/roles/list").then(response=>{
        let d=response.data;
        console.log(d)
        if(d.status==0){
          this.tableData=d.data;
        }
      })
    },
    open1(msg) {
      if (msg==null){
        msg="成功！";
      }
      this.$notify({
        title: '成功',
        message: msg,
        type: 'success'
      })},
  },
}
</script>

<style scoped>

</style>